<template>
  <div class="boxs">
    <div class="title">Distribution view</div>
    <div class="yhzcfb">
      <div id="yhzcfb"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, watch, ref } from "vue";
import themstore from "@/store/themctel/index";
import { getorderdata } from "@/api/index";
const usethemstore = themstore();
import * as echarts from "echarts";
const themcolor = ref<string>();
const themcolor2 = ref<string>();
const themcolor3 = ref<string>();
const dataaa = ref<any>([]);
watch(
  () => usethemstore.chagethem,
  () => {
    setcharts();
  }
);
onMounted(() => {
  setcharts();
  getorderdatas();
});
const getorderdatas = async () => {
  const rudata = await getorderdata();
  if (rudata.code == 200) {
    const newdata = rudata.data.map((i) => {
      return new Date(i.createdAt).getMonth() + 1;
    });
    const showdata = new Array(12).fill(0);
    newdata.forEach((i) => {
      showdata[i - 1]++;
    });
    dataaa.value = showdata;
    setcharts();
  }
};
const setcharts = () => {
  themcolor.value = getComputedStyle(document.documentElement).getPropertyValue(
    "--them-color"
  );
  themcolor2.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color2");
  themcolor3.value = getComputedStyle(
    document.documentElement
  ).getPropertyValue("--them-color3");
  const doms: HTMLDivElement = document.querySelector(
    "#yhzcfb"
  ) as HTMLDivElement;
  const aa = echarts.init(doms);
  let option;
  option = {
    color: [themcolor.value, themcolor2.value],

    radar: {
      splitLine: {
        lineStyle: {
          color: themcolor3.value, // 替换为你的颜色值
        },
      },
      // 外圆的位置
      center: ["50%", "50%"],
      // 大小
      radius: "75%",
      name: {
        textStyle: {
          color: "#fff",
          fontSize: 11,
        },
      },
      // "Jan", "Feb", "Mar", "Apr", "May"
      indicator: [
        { name: "Jan", max: 20 },
        { name: "Feb", max: 20 },
        { name: "Mar", max: 20 },
        { name: "Apr", max: 20 },
        { name: "May", max: 20 },
        { name: "Jun", max: 20 },
        { name: "June", max: 20 },
        { name: "Augu", max: 20 },
        { name: "Sep", max: 20 },
        { name: "Oct", max: 20 },
        { name: "Nov", max: 20 },
        { name: "Dec", max: 20 },
      ],
      axisLine: {
        // 指向外圈文本的分隔线样式
        lineStyle: {
          color: themcolor3.value,
        },
      },
    },

    series: [
      {
        type: "radar",
        data: [
          // {
          //   value: [120, 100, 120, 135, 150, 180],
          //   name: "22级1班",
          //   areaStyle: {
          //     color: themcolor.value,
          //   },
          //   // 取消拐点
          //   symbolSize: 0,
          //   // 区域边缘线样式
          //   lineStyle: {
          //     normal: {
          //       color: themcolor.value,
          //       width: 2,
          //     },
          //   },
          // },
          {
            value: dataaa.value,
            name: "22级2班",
            areaStyle: {
              color: themcolor.value,
            },
            // 取消拐点
            symbolSize: 0,
            // 区域边缘线样式
            lineStyle: {
              normal: {
                color: themcolor2.value,
                width: 2,
              },
            },
          },
        ],
      },
    ],
  };

  aa.setOption(option);
};
</script>

<style scoped lang="scss">
.boxs {
  height: 100%;
  width: 100%;
  .title {
    height: 50px;
    font-size: 0.8vw;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a8ac;
  }
  .yhzcfb {
    height: calc(100% - 50px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #yhzcfb {
    width: 100%;
    height: 100%;
  }
}
</style>
